<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🕐 小朋友时钟学习游戏</title>
    <link rel="stylesheet" href="clock-learning.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>🕐 时钟学习游戏</h1>
            <p class="subtitle">让我们一起来学习时间吧！</p>
        </header>

        <div class="clock-container">
            <!-- 大时钟显示 -->
            <div class="clock">
                <div class="clock-face">
                    <!-- 时钟数字 -->
                    <div class="number number-12">12</div>
                    <div class="number number-1">1</div>
                    <div class="number number-2">2</div>
                    <div class="number number-3">3</div>
                    <div class="number number-4">4</div>
                    <div class="number number-5">5</div>
                    <div class="number number-6">6</div>
                    <div class="number number-7">7</div>
                    <div class="number number-8">8</div>
                    <div class="number number-9">9</div>
                    <div class="number number-10">10</div>
                    <div class="number number-11">11</div>

                    <!-- 时钟指针 -->
                    <div class="hand hour-hand" id="hour-hand"></div>
                    <div class="hand minute-hand" id="minute-hand"></div>
                    <div class="hand second-hand" id="second-hand"></div>

                    <!-- 时钟中心点 -->
                    <div class="center-dot"></div>
                </div>
            </div>

            <!-- 时间显示 -->
            <div class="time-display">
                <div class="digital-time" id="digital-time">12:00:00</div>
                <div class="time-text" id="time-text">中午十二点整</div>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="controls">
            <div class="control-group">
                <h3>🎮 时间控制</h3>
                <div class="time-inputs">
                    <div class="input-group">
                        <label for="hour-input">小时:</label>
                        <input type="number" id="hour-input" min="0" max="23" value="12">
                    </div>
                    <div class="input-group">
                        <label for="minute-input">分钟:</label>
                        <input type="number" id="minute-input" min="0" max="59" value="0">
                    </div>
                    <div class="input-group">
                        <label for="second-input">秒钟:</label>
                        <input type="number" id="second-input" min="0" max="59" value="0">
                    </div>
                </div>
                <button id="set-time-btn" class="btn primary">⏰ 设置时间</button>
            </div>

            <div class="control-group">
                <h3>🕒 快速操作</h3>
                <div class="quick-buttons">
                    <button id="real-time-btn" class="btn secondary">🕐 显示当前时间</button>
                    <button id="random-time-btn" class="btn secondary">🎲 随机时间</button>
                    <button id="reset-btn" class="btn secondary">🔄 重置</button>
                </div>
            </div>

            <div class="control-group">
                <h3>📚 学习模式</h3>
                <div class="learning-modes">
                    <button id="practice-mode-btn" class="btn learning">🎯 练习模式</button>
                    <button id="quiz-mode-btn" class="btn learning">❓ 测验模式</button>
                </div>
            </div>
        </div>

        <!-- 练习模式面板 -->
        <div class="practice-panel" id="practice-panel" style="display: none;">
            <h3>🎯 练习模式</h3>
            <p>请设置时钟显示 <span id="target-time">3:30</span></p>
            <div class="practice-controls">
                <button id="check-answer-btn" class="btn primary">✅ 检查答案</button>
                <button id="next-question-btn" class="btn secondary">⏭️ 下一题</button>
                <button id="exit-practice-btn" class="btn secondary">❌ 退出练习</button>
            </div>
            <div class="practice-result" id="practice-result"></div>
        </div>

        <!-- 测验模式面板 -->
        <div class="quiz-panel" id="quiz-panel" style="display: none;">
            <h3>❓ 测验模式</h3>
            <p>现在几点了？</p>
            <div class="quiz-options" id="quiz-options">
                <!-- 选项将通过JavaScript动态生成 -->
            </div>
            <div class="quiz-result" id="quiz-result"></div>
            <button id="exit-quiz-btn" class="btn secondary">❌ 退出测验</button>
        </div>
    </div>

    <script src="clock-learning.js"></script>
</body>

</html>